<template>
  <div class="docx-viewer">
    <div v-if="loading" class="loading-container">
      <Loader class="loading-icon" />
      <p>Word 文档加载中，请稍候...</p>
    </div>

    <div v-else-if="loadError" class="error-container">
      <AlertCircle size="48" />
      <p>{{ loadError }}</p>
      <button class="error-action" @click="reloadDocx">重试</button>
    </div>

    <!-- Word文档预览容器 -->
    <div v-else class="docx-content" ref="docxContainer"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, defineEmits } from 'vue'
import { Loader, AlertCircle } from 'lucide-vue-next'
import { renderAsync } from 'docx-preview'

const props = defineProps({
  filePath: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['loading-change'])

// 状态变量
const loading = ref(true)
const loadError = ref('')
const docxContainer = ref<HTMLDivElement | null>(null)

// 加载Word文档
const loadDocxFile = async () => {
  try {
    loading.value = true
    emit('loading-change', true)

    if (!props.filePath) {
      throw new Error('未提供文件路径')
    }

    if (!docxContainer.value) {
      throw new Error('文档容器不存在')
    }

    // 读取文件
    const response = await fetch(`file://${props.filePath}`)
    const arrayBuffer = await response.arrayBuffer()

    // 使用docx-preview渲染
    await renderAsync(arrayBuffer, docxContainer.value, null, {
      ignoreWidth: true,
      ignoreHeight: true,
      debug: false
    })

    loading.value = false
    emit('loading-change', false)
  } catch (error) {
    console.error('Word文档加载错误:', error)
    loading.value = false
    loadError.value = `Word文档加载失败: ${error instanceof Error ? error.message : '未知错误'}`
    emit('loading-change', false)
  }
}

// 初始化
onMounted(() => {
  loadDocxFile()
})

// 重新加载文档
const reloadDocx = () => {
  loadError.value = ''
  loading.value = true
  emit('loading-change', true)

  // 清空容器内容
  if (docxContainer.value) {
    docxContainer.value.innerHTML = ''
  }

  setTimeout(() => {
    loadDocxFile()
  }, 300)
}
</script>

<style scoped>
.docx-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  position: relative;
}

.docx-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background-color: #f5f5f5;
}

/* 文档样式调整 */
.docx-content :deep(.document-container) {
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin: 0 auto;
  max-width: 800px;
  padding: 40px;
}

.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 16px;
  color: var(--theme-text-secondary);
}

.loading-icon {
  animation: spin 1.5s linear infinite;
}

.error-action {
  padding: 8px 16px;
  background-color: var(--theme-primary);
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
